<template>
    <transition name="fade">
        <div :class="classes">
            <span :class="dotClasses" v-if="dot"></span><span :class="textClasses"><slot></slot></span>
            <Icon v-if="closable" type="ios-close-empty" @click.native.stop="close"></Icon>
        </div>
    </transition>
</template>
<script>
    import Icon from '../icon';
    import {oneOf} from '../../utils/assist';

    const prefixCls = 'ivu-tag';

    export default {
        name: 'Tag',
        components: {Icon},
        props: {
            closable: {
                type: Boolean,
                default: false
            },
            border: {
                type: Boolean,
                default: false
            },
            dot: {
                type: Boolean,
                default: false
            },
            color: {
                validator (value) {
                    return oneOf(value, ['primary', 'info', 'success', 'warning', "error"]);
                }
            },
            name: {
                type: [String, Number]
            }
        },
        computed: {
            classes () {
                return [
                    `${prefixCls}`,
                    {
                        [`${prefixCls}-${this.color}`]: !!this.color,
                        [`${prefixCls}-dot`]: this.dot,
                        [`${prefixCls}-border`]: this.border && !this.dot,
                        [`${prefixCls}-closable`]: this.closable
                    }
                ];
            },
            textClasses () {
                return `${prefixCls}-text`;
            },
            dotClasses () {
                return `${prefixCls}-dot-inner`;
            }
        },
        methods: {
            close (event) {
                if (this.name === undefined) {
                    this.$emit('on-close', event);
                } else {
                    this.$emit('on-close', event, this.name);
                }
            }
        }
    };
</script>